<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			路由嵌套：
				每个被嵌套的路由组件都需要提供一个路由出口router-view
			路由参数：
				当使用路由参数时，如path：'menu/:type',从'/menu/setting' --> '/menu/user',
				原来的组件实例会被复用，因此组件的生命周期钩子函数只执行一次
				如果想通过路由参数改变渲染页面，可通过监听$route，并在该方法通过to参数的内容进行判断实现
				
		</pre>
		<div id="app">
			<App />
		</div>
		
		<script src="../node_modules/vue/dist/vue.js"></script>
		<script src="../node_modules/vue-router/dist/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let Menu = {
				template: `<p>menu组件<br />
					<router-link to="/menu/songs">歌曲</router-link>
					<router-link to="/menu/movies">电影</router-link>
					<router-view></router-view>
				</p>`,
				mounted(){
					console.log(this.$route.params.menuId)
				},
			}
			let Songs = {
				template: '<p>我和我的祖国</p>',
			}
			let Movies = {
				template: '<p>中国机长</p>',
			}
			let Content = {
				template: '<p>content组件</p>',
				mounted(){
					console.log(this.$route.query.contentId)
				},
			}
			let router = new VueRouter({
				//mode: 'hash',//默认hash模式(导航栏带有#)，可选history模式,只能在脚手架项目中使用
				routes: [{
					path: '/menu',
					name: 'menu',
					component: Menu,
					children: [{
						path: '/menu/songs',
						name: 'songs',
						component: Songs
					},{
						path: '/menu/movies',
						name: 'movies',
						component: Movies
					}]
				},{
					path: '/content',
					name: 'content',
					component: Content
				}]
			})
			
			let App = {
				template:`
				<div>
					<router-link to="/menu">菜单</router-link>
					<router-link to="/content">内容</router-link>
					
					<router-view></router-view>
				</div>
				`,
				methods:{
					
					paramRouter(){
						this.$router.push({name: 'menu', params: {menuId: 'menu123'}})
					},
					queryRouter(){
						this.$router.push({name: 'content', query: {contentId: 'zqf123'}})
						
					},
				},
				watch: {
					'$route'(to, from){
						console.log(to, from)
						if(to.name === 'movies'){
							console.log('当前是movie组件')
						}
					}
				}
			}
			let vm = new Vue({
				el: '#app',
				components: {App},
				router,
				data(){
					return {
						name: 'zqf'
					}
				},
			})
		</script>
	</body>
</html>
